<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习2使用DOM操作图片</title>
    <style type="text/css">
        html,
        div,
        ul,
        li {
            margin: 0px;
            padding: 0px;
        }

        a {
            cursor: pointer;
        }

        li {
            list-style: none;
            cursor: pointer;
        }

        fieldset {
            border: #000 1px dashed;
            width: 225px;
            height: 225px;
            padding: 10px;
            text-align: center;
            float: left;
            margin-left: 5px;
        }

        #cont_left {
            width: 300px;
            height: 500px;
            float: left;
        }

        #cont_right {
            float: left;
        }

        .newcss1 {
            background-color: yellowgreen;
        }
    </style>
</head>

<body>
    <div id="cont_left">
        <ul><img src="img/fold.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
            <ul id="menu1">
                <li onclick="showImg()"><img src="img/doc.gif">获取原始图片路径</li>
                <li onclick="getFruit()"><img src="img/doc.gif">获取我喜欢的水果</li>
            </ul>
        </ul>

        <ul><img src="img/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
            <ul id="menu2">
                <li onclick="createImg()"><img src="img/doc.gif">创建图片</li>
                <li onclick="cloneImg()"><img src="img/doc.gif">克隆图片</li>
                <li onclick="changeImg()"><img src="img/doc.gif">改变图片</li>
                <li onclick="removeImg()"><img src="img/doc.gif">删除图片</li>
            </ul>
        </ul>

        <ul><img src="img/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
            <ul id="menu3">
                <li onclick="changeCss1()"><img src="img/doc.gif">为原始图片加上行间样式</li>
                <li onclick="changeCss2()"><img src="img/doc.gif">为所有的fieldset加上内部样式</li>
            </ul>
        </ul>

    </div>
    <fieldset>
        <legend>原始图片</legend>
        <img id="fruit" src="img/fruit.jpg">
    </fieldset>
    <fieldset>
        <legend>图片路径</legend>
        <p id="msg1">在这里显示</p>
    </fieldset>
    <fieldset>
        <legend>选择你喜欢的水果</legend>
        <ul style="text-align: left;">
            <li>
                <input name="enjoy" type="checkbox" value="苹果" />苹果
            </li>
            <li>
                <input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉
            </li>
            <li>
                <input name="enjoy" type="checkbox" value="葡萄" />葡萄
            </li>
            <li>
                <input name="enjoy" type="checkbox" value="梨" checked="checked" />梨
            </li>
            <li>
                <input name="enjoy" type="checkbox" value="西瓜" />西瓜
            </li>
        </ul>
        <div id="msg2" style="margin-top: 10px;text-align: left;"></div>
    </fieldset>
    <fieldset>
        <legend>创建图片</legend>
        <div id="msg3"></div>
    </fieldset>
    <fieldset>
        <legend>克隆图片</legend>
        <div id="msg4"></div>
    </fieldset>
    <script>
		//219971207 傅博英
        //菜单收缩与扩展
        function show(title) {
            let currentMenu = document.getElementById(title);
            let currentStatus = currentMenu.style.display;
           currentMenu.style.display = !currentStatus ? "none" : "";
        }
        //获取原始图片路径
        function showImg() {
            let a1 = document.getElementById("fruit").getAttribute("src");//获取图片的路径
            let aa = document.getElementById("msg1"); //获取指定位置的id
            aa.innerHTML = a1; //使用innerHTML属性将路径设置为元素的文本内容
        }
        //获取喜欢的水果
        function getFruit() {
            let en = document.getElementsByName("enjoy");//获取文本元素 
            let msg2 = document.getElementById("msg2");
            msg2.innerHTML = "你最喜欢的水果是：";
            for (let i = 0; i < en.length; i++) {
                if (en[i].checked == true) {
                    msg2.innerHTML += en[i].value + " ";
                }
            }
        }
        //创建图片
        function createImg() {
            let img1 = document.createElement('img');//创建一个 img1 元素节点。
            img1.src = 'img/grape.jpg';//设置图片元素节点的属性
            let msg3 = document.getElementById("msg3");
            msg3.appendChild(img1);//把图片元素节点添加到msg3中

        }
        //克隆图片
        function cloneImg() {
            let img1 = document.getElementById("fruit");//获取id名为fruit的元素。
            let cloned = img1.cloneNode(true); // true表示深度克隆，即连同子元素一起克隆
            let msg4 = document.getElementById("msg4");
            msg4.appendChild(cloned);//把图片元素节点添加到msg4中
        }
        //改变图片
        function changeImg() {
            let img2 = document.getElementById("fruit");
            img2.setAttribute("src", "img/grape.jpg");//更改其src属性，将其设置为新图像的路径
        }
        //删除图片
        function removeImg() {
            let img3 = document.getElementById("fruit");//获取图像元素
            img3.parentNode.removeChild(img3);//从父元素中删除图像元素
        }
        //操作样式1
        function changeCss1() {
            let img4 = document.getElementById("fruit");//获取图像元素
            img4.style.border = "5px solid blue";//添加边框样式


        }
        //操作样式2
        function changeCss2() {
            let chang = document.querySelectorAll("fieldset");//获取fieldset标签元素
            for (var i = 0; i < chang.length; i++) {
                chang[i].style.backgroundColor = "red"; //为每一个fieldset标签添加背景颜色
            }
        }
    </script>
</body>

</html>